<template>
  <div style="margin: 10px;">
    <el-row>
      <el-col :span="1.8">
        <el-upload
            ref="excelUpload"
            class="upload-demo"
            :action="uploadPath"
            :limit="1"
            :headers="headers"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :on-exceed="handleExceed"
        >
          <el-button type="primary" size="small" :icon="icons.Upload">导入</el-button>
          <!--          <template #tip>-->
          <!--            <div class="el-upload__tip">-->
          <!--              xls/xlsx/csv files with a size less than 100MB.-->
          <!--            </div>-->
          <!--          </template>-->
        </el-upload>

      </el-col>
      <el-col :span="1.5">
        <!--    <el-button type="primary" size="small"  :icon="icons.Upload">导入</el-button>-->
        <el-button type="warning" size="small" :icon="icons.Download"
                   @click="handleExportCates">
          导出
          <!--      <a href="http://localhost:8080/product/category/export">导出</a>-->
        </el-button>
      </el-col>
    </el-row>
  </div>
  <el-table
      :data="level1Data"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  >
    <el-table-column prop="name" label="分类名称"/>
    <el-table-column prop="imageUrl" label="图标">
      <template #default="scope">
        <img v-if="scope.row.imageUrl " :src="scope.row.imageUrl" alt="" style="width: 35px; height: 35px">
      </template>
    </el-table-column>
    <el-table-column prop="orderNum" label="排序"/>
    <el-table-column prop="status" label="状态">
      <template #default="scope">
          <span v-text="scope.row.status===1?'正常':'不正常'">
          </span>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间"/>

  </el-table>


</template>

<script setup>
import {listCatesByPid} from "@/api/product/category.js";
import * as icons from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
import {getToken} from "@/utils/auth.js";

let {proxy} = getCurrentInstance()//获取当前页面的实例
//1、页面初始化加载第一次分类数据列表
onMounted(() => {
  initPageData(0)


})
const initPageData = async (pid) => {
  const {data} = await listCatesByPid(pid)
  level1Data.value = data
}
const level1Data = ref([])

//2、懒加载：  点击每一行的箭头时，会触发 load属性值的函数回调
//参数1：点击的箭头所在行的json对象 ， 参数2：节点对象  参数3：解析对象(可以自动将设置给它的数据渲染到 参数2的下面)

const load = async (row, treeNode, resolve) => {
  //1、查询点击按钮下一级分类数据列表
  const {data} = await listCatesByPid(row.id)
//2、将查询到的下一级数据 解析到treeNode的下一级展示
  resolve(data)


  resolve()
}

//3、导出分类列表数据
const handleExportCates = () => {

  //使用页面对象  访问指定路径下载文件
  proxy.download('/product/category/export', {}, `category_${new Date().getTime()}.xlsx`)
}

const uploadPath = "http://localhost:8080/product/category/import"
const headers = {'Authorization': 'Bearer ' + getToken()}
const  excelUpload  =ref({})

//上传成功的回调： 响应报文状态码为200回调，但是响应体状态码不一定是200
const handleUploadSuccess = (r) => {
  if (+r === 200) {
    ElMessage.success("文件上传成功！")
    initPageData(0)
  } else {
    ElMessage.success("文件上传失败,文件解析错误！")
  }
  excelUpload.value.clearFiles()

}
//上传失败的回调：响应报文状态码不是200回调
const handleUploadError = (e) => {
  ElMessage.error("上传失败,网络错误")
}
//上传文件超过limit数量限制时回调
const handleExceed = () => {
ElMessage.warning("选择文件上传的次数超限")

}
</script>

<style scoped>

</style>